<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

    // Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

    // var data = {
    //     a: 1,
    //     b: 2,
    //     c: 3,
    //     d: 4,
    // }

    // 操作对象本身 -> 添加取值拦截和赋值拦截
    // for (var key in data) {
    //     let defaultValue = data[key]; //先记录初始值
    //     Object.defineProperty(data, key, {
    //         //  取值拦截
    //         get: function () {
    //             console.log("取值拦截");
    //             return defaultValue;
    //         },
    //         // 赋值拦截
    //         set: function (val) {
    //             console.log("赋值拦截");
    //             defaultValue = val;
    //         }
    //     })
    // }
    // console.log(data);

    // 根据原本的对象 ->生成了一个代理对象 -> 对代理对象的操作都会传递给 data
    // var _data = {};  //新对象(经纪人)
    // for (let key in data) {  // 原对象的键名
    //     Object.defineProperty(_data, key, {
    //         //  取值拦截
    //         get: function () {
    //             console.log("取值拦截",key);
    //             return data[key];
    //         },
    //         // 赋值拦截
    //         set: function (val) {
    //             console.log("赋值拦截",key,val);
    //             data[key] = val;
    //         }
    //     })
    // }
    // console.log(_data);
    // console.log(_data.a);
    // _data.a = 10;
    // console.log(_data.a);


    // -------------------------------------------------------------
    // Proxy 用法
    // new Proxy(targetObj,options)
    // targetObj  需要代理的对象
    // options    拦截设置  


    var data = {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e:{
            f:5,
            g:6,
        }
    }
    // var _data = new Proxy(data,{
    //     get:function(target,key){
    //         console.log("取值拦截",target,key);
    //         return target[key];
    //     },
    //     set:function(target,key,val){
    //         console.log("赋值拦截",target,key,val);
    //         target[key] = val;
    //     },
    //     deleteProperty:function(target,key){
    //         console.log("删除拦截",target,key);
    //         delete target[key];
    //     }
    // });

    // console.log(_data);
    // console.log(_data.a);
    // _data.a = 100;
    // delete _data.a;
    // console.log(data);

    console.log(_data.e.f);


    var _data = new Proxy(data,{}); // 因为没有设置拦截函数  对_data的操作会直接同步到data;






</script>

</html>